M
MLOG
રિએક્ટ લેઝી લોડિંગ: શ્રેષ્ઠ પ્રદર્શન માટે કોમ્પોનન્ટ કોડ સ્પ્લિટિંગ | MLOG | MLOG ); } export default ImageGallery;

અને Image.js કોમ્પોનન્ટ:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

આ ઉદાહરણમાં, દરેક છબી <Suspense> કોમ્પોનન્ટમાં રેપ કરેલી છે, તેથી દરેક છબી લોડ થતી વખતે તેના માટે લોડિંગ સંદેશ પ્રદર્શિત થશે. આ છબીઓ ડાઉનલોડ થતી વખતે સમગ્ર પૃષ્ઠને બ્લોક થવાથી અટકાવે છે.

અદ્યતન તકનીકો અને વિચારણાઓ

૧. એરર બાઉન્ડ્રીઝ

લેઝી લોડિંગનો ઉપયોગ કરતી વખતે, લોડિંગ પ્રક્રિયા દરમિયાન થઈ શકે તેવી સંભવિત ભૂલોને હેન્ડલ કરવી મહત્વપૂર્ણ છે. એરર બાઉન્ડ્રીઝનો ઉપયોગ આ ભૂલોને પકડવા અને ફોલબેક UI પ્રદર્શિત કરવા માટે કરી શકાય છે. તમે આના જેવું એરર બાઉન્ડ્રી કોમ્પોનન્ટ બનાવી શકો છો:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

પછી <Suspense> કોમ્પોનન્ટને <ErrorBoundary> સાથે રેપ કરો:



  Loading...}>

જો MyComponent લોડ કરતી વખતે કોઈ ભૂલ થાય, તો <ErrorBoundary> તેને પકડી લેશે અને ફોલબેક UI પ્રદર્શિત કરશે.

૨. સર્વર-સાઇડ રેન્ડરિંગ (SSR) અને લેઝી લોડિંગ

લેઝી લોડિંગનો ઉપયોગ તમારી એપ્લિકેશનના પ્રારંભિક લોડ સમયને સુધારવા માટે સર્વર-સાઇડ રેન્ડરિંગ (SSR) સાથે પણ કરી શકાય છે. જો કે, તેને કેટલાક વધારાના કન્ફિગરેશનની જરૂર છે. તમારે ખાતરી કરવાની જરૂર પડશે કે સર્વર ડાયનેમિક ઇમ્પોર્ટ્સને યોગ્ય રીતે હેન્ડલ કરી શકે છે અને લેઝી-લોડેડ કોમ્પોનન્ટ્સ ક્લાયંટ-સાઇડ પર યોગ્ય રીતે હાઇડ્રેટેડ છે.

Next.js અને Gatsby.js જેવા સાધનો SSR વાતાવરણમાં લેઝી લોડિંગ અને કોડ સ્પ્લિટિંગ માટે બિલ્ટ-ઇન સપોર્ટ પૂરો પાડે છે, જે પ્રક્રિયાને ખૂબ સરળ બનાવે છે.

૩. લેઝી-લોડેડ કોમ્પોનન્ટ્સનું પ્રીલોડિંગ

કેટલાક કિસ્સાઓમાં, તમે લેઝી-લોડેડ કોમ્પોનન્ટને તેની ખરેખર જરૂર પડે તે પહેલાં પ્રીલોડ કરવા માંગી શકો છો. આ તે કોમ્પોનન્ટ્સ માટે ઉપયોગી થઈ શકે છે જે ટૂંક સમયમાં રેન્ડર થવાની સંભાવના છે, જેમ કે તે કોમ્પોનન્ટ્સ જે ફોલ્ડની નીચે સ્થિત છે પરંતુ વ્યુમાં સ્ક્રોલ થવાની સંભાવના છે. તમે import() ફંક્શનને મેન્યુઅલી કૉલ કરીને કોમ્પોનન્ટને પ્રીલોડ કરી શકો છો:


import('./MyComponent'); // Preload MyComponent

આ બેકગ્રાઉન્ડમાં કોમ્પોનન્ટ લોડ કરવાનું શરૂ કરશે, તેથી જ્યારે તે ખરેખર રેન્ડર થશે ત્યારે તે વધુ ઝડપથી ઉપલબ્ધ થશે.

૪. વેબપેક મેજિક કમેન્ટ્સ સાથે ડાયનેમિક ઇમ્પોર્ટ્સ

વેબપેકની "મેજિક કમેન્ટ્સ" જનરેટ થયેલ કોડ ચંક્સના નામોને કસ્ટમાઇઝ કરવાની રીત પ્રદાન કરે છે. આ તમારી એપ્લિકેશનના બંડલ માળખાના ડિબગીંગ અને વિશ્લેષણ માટે મદદરૂપ થઈ શકે છે. ઉદાહરણ તરીકે:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

આ એક સામાન્ય નામને બદલે "my-component.js" (અથવા સમાન) નામનો કોડ ચંક બનાવશે.

૫. સામાન્ય ભૂલો ટાળવી

વાસ્તવિક-વિશ્વના ઉદાહરણો અને ઉપયોગના કેસો

રિએક્ટ એપ્લિકેશન્સના પ્રદર્શનને સુધારવા માટે લેઝી લોડિંગનો ઉપયોગ વિશાળ શ્રેણીના દૃશ્યોમાં કરી શકાય છે. અહીં કેટલાક ઉદાહરણો છે:

ઉદાહરણ: આંતરરાષ્ટ્રીય ઈ-કોમર્સ વેબસાઇટ

એક ઈ-કોમર્સ વેબસાઇટની કલ્પના કરો જે વૈશ્વિક સ્તરે ઉત્પાદનો વેચે છે. જુદા જુદા દેશોમાં જુદી જુદી કરન્સી, ભાષાઓ અને પ્રોડક્ટ કેટેલોગ હોઈ શકે છે. દરેક દેશ માટે તમામ ડેટા અપફ્રન્ટ લોડ કરવાને બદલે, તમે લેઝી લોડિંગનો ઉપયોગ કરીને વપરાશકર્તાના સ્થાન માટે વિશિષ્ટ ડેટા ફક્ત ત્યારે જ લોડ કરી શકો છો જ્યારે તેઓ સાઇટની મુલાકાત લે છે.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Function to determine user's country

  return (
    Loading content for your region...}>
      
      
    
  );
}

નિષ્કર્ષ

લેઝી લોડિંગ અને કોમ્પોનન્ટ કોડ સ્પ્લિટિંગ રિએક્ટ એપ્લિકેશન્સના પ્રદર્શનને શ્રેષ્ઠ બનાવવા માટે શક્તિશાળી તકનીકો છે. કોમ્પોનન્ટ્સ ફક્ત ત્યારે જ લોડ કરીને જ્યારે તેમની જરૂર હોય, તમે પ્રારંભિક લોડ સમયમાં નોંધપાત્ર ઘટાડો કરી શકો છો, વપરાશકર્તા અનુભવ સુધારી શકો છો અને તમારું SEO વધારી શકો છો. રિએક્ટના બિલ્ટ-ઇન React.lazy() અને <Suspense> કોમ્પોનન્ટ્સ તમારા પ્રોજેક્ટ્સમાં લેઝી લોડિંગનો અમલ કરવાનું સરળ બનાવે છે. વૈશ્વિક પ્રેક્ષકો માટે ઝડપી, વધુ પ્રતિભાવશીલ અને વધુ આકર્ષક વેબ એપ્લિકેશન્સ બનાવવા માટે આ તકનીકોને અપનાવો.

લેઝી લોડિંગનો અમલ કરતી વખતે હંમેશા વપરાશકર્તા અનુભવને ધ્યાનમાં રાખો. માહિતીપ્રદ ફોલબેક UIs પ્રદાન કરો, સંભવિત ભૂલોને આકર્ષક રીતે હેન્ડલ કરો અને તમારી એપ્લિકેશનના પ્રદર્શનનું કાળજીપૂર્વક વિશ્લેષણ કરો જેથી ખાતરી થઈ શકે કે તમે ઇચ્છિત પરિણામો પ્રાપ્ત કરી રહ્યાં છો. જુદા જુદા અભિગમો સાથે પ્રયોગ કરવામાં ડરશો નહીં અને તમારી ચોક્કસ જરૂરિયાતો માટે શ્રેષ્ઠ ઉકેલ શોધો.